import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Image,
  Text,
  Modal,
  TouchableOpacity,
  ActivityIndicator,
  Platform,
  Dimensions
} from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
import baseConfig from '@/config/baseConfig';

const { fileUrl } = baseConfig;
let ScreenWidth = Dimensions.get('window').width;
let ScreenHeight = Dimensions.get('window').height;
const isIOS = Platform.OS === 'ios'; // 判断是否为iOS
function isIphoneX() {
  return (
    isIOS &&
        !Platform.isPad &&
        !Platform.isTVOS &&
        (ScreenHeight >= 812 || ScreenWidth >= 812)
  );
}
// UI图设计基准大小
const uiWidthPx = 750;
function px2dp(uiElementPx) {
  if (ScreenWidth > ScreenHeight) {
    return (uiElementPx * ScreenHeight) / uiWidthPx;
  }
  return (uiElementPx * ScreenWidth) / uiWidthPx;
}

/**
 * @remark 独立组件 不可妄动
 * @author kanglang
 * @description 查看预览图片组件
 * @createDate 2020/8/26
 * previewModal 是否显示 boolean
 * viewHeight 图片的高度 number
 * leftBackText 顶部左边返回/取消文本 string
 * leftBackIcon 顶部左边返回按钮图片，如有图片则不展示 leftBackText  默认无图片 image
 * images 图片数组 array 如 [{url: ""},{url: ""}]
 * showFooter 是否显示底部View 默认为true
 */

export default class XmImageViewer extends Component {
  constructor(props) {
    super(props);
    this.state = ({
      previewLabel: '',
      previewAdress: '',
    });
  }

  componentDidMount() {
    let { images = [] } = this.props;
    iamges = images.map((item) => {
      item.url = fileUrl + item.url;
      return item;
    });
    console.log('🚀🚀🚀wimi======>>>images', images);
    this.setState({
      previewLabel: images.length > 0 && images[0].type,
      previewAdress: images.length > 0 && images[0].adress,
    });
  }

    showViewModal = () => {
      this.props.showViewModal && this.props.showViewModal();
    }

    render() {
      const { previewModal, viewHeight, leftBackText, images = [], leftBackIcon, showFooter = true } = this.props;
      const { previewLabel, previewAdress } = this.state;
      return (
        <Modal
          visible={previewModal}
          transparent
        >
          <TouchableOpacity
            activeOpacity={0.8}
            style={styles.backBtn}
            onPress={this.showViewModal}
          >
            {
              leftBackIcon ?
                <Image style={styles.leftBack} source={leftBackIcon} /> :
                <Text style={styles.leftText}>{leftBackText || '关闭'}</Text>
            }
          </TouchableOpacity>
          <ImageViewer
            style={{ height: viewHeight || px2dp(375) * 2, }}
            imageUrls={images}
            enableImageZoom // 是否开启手势缩放
            saveToLocalByLongPress={false} // 是否开启长按保存
            loadingRender={this.renderLoad}
            onChange={(index) => {
              setTimeout(() => {
                this.setState({
                  previewLabel: images.length > 0 && images[index].type,
                  previewAdress: images.length > 0 && images[index].adress
                });
              }, 100);
            }}
            renderFooter={() => {
              return (
                showFooter ?
                  <View style={styles.viewerStyle}>
                    <Text style={[styles.commonText, styles.textOne]}>{previewLabel}</Text>
                    <Text style={[styles.commonText, styles.textTwo]}>{previewAdress}</Text>
                  </View> :
                  null
              );
            }}
          />
        </Modal>
      );
    }

    renderLoad() { // 这里是写的一个loading
      return (
        <View style={{ marginTop: (ScreenHeight / 2) - px2dp(20) * 2 }}>
          <ActivityIndicator size='large' />
        </View>
      );
    }
}

const styles = StyleSheet.create({
  viewerStyle: {
    paddingBottom: px2dp(24) * 2,
    paddingTop: px2dp(5) * 2,
    flexDirection: 'row',
    backgroundColor: 'rgba(0,0,0,0.4)'
  },
  commonText: {
    color: '#FFFFFF',
    fontSize: px2dp(14) * 2
  },
  textOne: {
    width: '20%',
    textAlign: 'left',
    paddingLeft: px2dp(16) * 2
  },
  textTwo: {
    width: '80%',
    textAlign: 'right',
    paddingRight: px2dp(16) * 2
  },
  leftBack: {
    width: px2dp(20) * 2,
    height: px2dp(20) * 2
  },
  backBtn: {
    paddingLeft: px2dp(12) * 2,
    paddingRight: px2dp(12) * 2,
    top: isIphoneX ? px2dp(40) * 2 : px2dp(20) * 2,
    position: 'absolute',
    zIndex: 3000
  },
  leftText: {
    fontSize: px2dp(14) * 2,
    color: '#FFFFFF'
  }
});
